import regex from '@/constants/Regex'
import { ADMIN_API, USER } from '@/services/admin/typings'
import { UserOutlined } from '@ant-design/icons'
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components'
import { Avatar, Checkbox } from 'antd'

interface UpdateModalProps {
  userInfo?: ADMIN_API.UserInfoVO
  roleList: ADMIN_API.RoleVO[]
  open: boolean
  onOpenChange: (state: boolean) => void
  checkedRoleList: string[]
  setCheckedRoleList: (roles: string[]) => void
  onFinish: (formData: USER.UserVO) => Promise<boolean>
}

const UpdateModal = (props: UpdateModalProps) => {
  const title = props.userInfo ? '修改用户' : '添加用户'

  return (
    <>
      <ModalForm<USER.UserVO>
        key={props.userInfo?.id || -1}
        initialValues={props.userInfo}
        title={title}
        open={props.open}
        onOpenChange={props.onOpenChange}
        onFinish={props.onFinish}
      >
        <ProForm.Group title="基本信息">
          <Avatar size={64} icon={<UserOutlined />} />
          <ProFormText hidden name="id"></ProFormText>
          <ProFormText label="姓名" name="userName" rules={[{ required: true, message: '密码不能为空' }]}></ProFormText>
          <ProFormText
            label="手机号"
            name="phone"
            rules={[
              { required: true, message: '密码不能为空' },
              {
                pattern: regex.PHONE,
                message: '请输入正确的手机号码',
              },
            ]}
          ></ProFormText>
          <ProFormText.Password label="密码" name="password"></ProFormText.Password>
        </ProForm.Group>

        {/*角色设置 开始*/}
        <ProForm.Group title={'角色设置'}>
          <Checkbox.Group
            onChange={(values) => props.setCheckedRoleList(values as string[])}
            options={props.roleList.map((role) => ({ label: role.role, value: role.id }))}
            value={props.checkedRoleList}
          />
        </ProForm.Group>
        {/*角色设置 结束*/}
      </ModalForm>
    </>
  )
}

export default UpdateModal
